<template>
  <view class="login">
    <text class="info">房屋信息</text>
    <view class="house-location">
      {{unit}}
    </view>
    <text class="info">业主信息</text>
    <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
    <u--form labelPosition="left" :model="form" ref="uForm" :rules="rules">
      <u-form-item label="姓名" prop="name" borderBottom ref="item1" labelWidth="208rpx">
        <u--input v-model="form.name" border="none" placeholder="请填写您的真实姓名"></u--input>
      </u-form-item>
      <u-form-item label="性别" prop="gender" borderBottom ref="item2" labelWidth="208rpx">
        <u-radio-group v-model="form.gender">
          <u-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in radiolist1" :key="index"
            :label="item.name" :name="item.title">
          </u-radio>
        </u-radio-group>
      </u-form-item>
      <!--  -->
      <u-form-item prop="mobile" borderBottom ref="item1" label="手机号" labelWidth="208rpx">
        <u--input v-model="form.mobile" placeholder-style="color:#979797" placeholder="请输入您的手机号" border="none">
        </u--input>
        <block slot="right">
          <u-count-down @finish="onFinish" v-if="isShowCountDown" :time="60 * 1000" format="ss s后可重新发送">
          </u-count-down>
          <view v-else @click="getCode" class="code-btn">获取验证码</view>
        </block>
      </u-form-item>
      <u-form-item prop="code" borderBottom ref="item1" label="验证码" labelWidth="208rpx">
        <u--input maxlength="6" v-model.number="form.code" placeholder-style="color:#979797" placeholder="请输入手机验证码"
          border="none">
        </u--input>
      </u-form-item>
    </u--form>
    <view style="background-color: #fff;">
      <view class="psd">
        <rich-text nodes="<h5>上传本人身份证照片</h5>"></rich-text>
        <text class="info1">请拍摄证件原件，并使照片中证件边缘完整，文字清晰，光线均匀</text>
      </view>
      <!--照片区域  -->
      <view class="pic">
        <image src="../../static/icon/add.png" />
        <text>上传人像面照片</text>
      </view>
      <view class="pic">
        <!--  -->
        <image src="../../static/icon/add.png" />
        <text>上传国徽面照片</text>
        <!--  -->
      </view>
      <view class="btn" @click='check'>
        <image src="../../static/icon/check.png" />
        <text>提交审核</text>
      </view>
    </view>
    <!-- 模拟短信提示 -->
    <u-notify @click.native="copyCode" ref="uNotify"></u-notify>
  </view>
</template>

<script>
  import {
    editHouse
  } from '@/api/edit-house.js'
  import {
    sendCode
  } from '@/api/login.js'
  export default {
    data() {
      return {
        img1: '',
        img2: '',
        a: '',
        b: '',
        c: '',
        code: '',
        unit: "",
        isShowCountDown: false,
        radiolist1: [{
            name: '男',
            title: 1,
            disabled: false
          },
          {
            name: '女',
            title: 0,
            disabled: false
          }
        ],
        form: {
          point: '北京西三旗花园',
          building: '1号楼',
          room: '201',
          name: '',
          gender: 1,
          code: null,
          mobile: "18900000000",
          idcardFrontUrl: 'https://img1.baidu.com/it/u=3870046931,1670196107&fm=253&fmt=auto&app=120&f=JPEG?w=261&h=174',
          idcardBackUrl: 'https://img1.baidu.com/it/u=3870046931,1670196107&fm=253&fmt=auto&app=120&f=JPEG?w=261&h=174'
        },
        rules: {
          name: [{
            required: true,
            message: '请输入名字',
            trigger: ['change', 'blur'],
          }],
          mobile: [{
              required: true,
              message: '请输入手机号',
              trigger: ['change', 'blur'],
            },
            {
              pattern: /^((\+|00)86)?1((3[\d])|(4[5,6,7,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[\d])|(9[1,8,9]))\d{8}$/,
              message: '手机号码格式不正确',
              trigger: ['change', 'blur'],
            }
          ],
          code: [{
            required: true,
            message: '请输入验证码',
            trigger: ['change', 'blur'],
          }, {
            pattern: /^\d{6}$/,
            message: '验证码格式不正确',
            trigger: ['change', 'blur'],
          }]
        }
      };
    },
    // computed: {
    //   userInfo() {
    //     return this.$store.state.user.userInfo
    //   }
    // },
    onLoad() {
      this.unit = uni.getStorageSync('unit')
    },
    methods: {
      // 用户选择头像
      // onChooseAvatar(e) {
      //   const avatar = e.detail.avatarUrl

      //   uni.uploadFile({
      //     url: 'https://live-api.itheima.net/upload',
      //     filePath: avatar,
      //     name: 'file',
      //     header: {
      //       Authorization: 'Bearer ' + this.$store.state.user.userToken.token
      //     },
      //     formData: {
      //       type: 'avatar'
      //     },
      //     success: async (res) => {
      //       const data = JSON.parse(res.data)
      //       if (data.code !== 10000) {
      //         return uni.showToast({
      //           icon: 'error',
      //           title: '上传失败'
      //         })
      //       }
      //       this.img2 = data.data.url
      //       console.log(data.data.url);
      //       // await this.$store.dispatch('user/loadUserInfo')
      //       uni.showToast({
      //         icon: 'success',
      //         title: '上传成功'
      //       })
      //     }
      //   })
      // },
      getCode() {
        // 校验手机号
        this.$refs.uForm.validateField('mobile', async (errRes) => {
          if (errRes.length) return
          // 手机号合法，发请求
          const res = await sendCode(this.form.mobile)
          // message
          const message = `【享+生活】验证码：${res.data.code}.您正在使用短信验证码功能，验证码提供他人可能导致账号被盗，请勿转发或泄漏。`
          this.code = res.data.code
          // 短信提示
          this.$refs.uNotify.show({
            top: 10,
            type: 'success',
            message: message,
            duration: 1000 * 6,
            fontSize: 14
          })
          // 震动
          uni.vibrateLong()
          // 显示倒计时
          this.isShowCountDown = true
        })
      },
      // 复制
      copyCode() {
        uni.setClipboardData({
          data: this.code
        })
      },
      // 倒计时结束
      onFinish() {
        this.isShowCountDown = false
      },
      // 提交审核
      async check() {
        this.a = this.unit.substr(-3, 3)
        this.b = this.unit.substr(-6, 3)
        this.c = this.unit.substr(0, this.unit.indexOf('号') - 1)
        this.form.point = this.unit.substr(-3, 3)
        this.form.building = this.unit.substr(-6, 3)
        this.form.point = this.unit.substr(0, this.unit.indexOf('号') - 1)
        // this.c = this.unit.indexOf('号')
        this.form.code = this.form.code - 0
        const res = await editHouse(this.form)
        console.log(res);
        uni.switchTab({
          url: '/pages/my/my'
        })
      }
    },
    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    }
  }
</script>

<style lang="less">
  .chooseAvatarBtn::after,
  .chooseAvatarBtn {
    background-color: unset;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .avatar {
    width: 100%;
    height: 100%;
  }

  .info {
    color: #979797;
    font-weight: regular;
    font-size: 24rpx;
    padding: 30rpx 0 20rpx 30rpx;
    line-height: 1.5;
    // background: #FAFAFA;
    // margin-left: 20rpx;
    // color: #979797;
    // font-family: PingFang SC;
    // font-weight: regular;
    // font-size: 12px;
    // line-height: 1.5;
    // letter-spacing: 0px;
    // text-align: center;
  }



  .info1 {
    background: #FAFAFA;
    color: #979797;
    font-family: PingFang SC;
    font-weight: regular;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0px;
    text-align: center;
  }

  .psd {
    margin-top: 20rpx;
    width: 750rpx;
    height: 80rpx;
  }

  .pic {
    width: 750rpx;
    height: 300rpx;
    // background: #5591AF;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 30rpx;

    .pic-btn {
      width: 100%;
      height: 100%;
    }

    text {
      color: #5591AF;
    }

    image {
      top: -20px;
      width: 50rpx;
      height: 50rpx;
      margin-bottom: 20rpx;
    }
  }

  .btn {
    width: 750rpx;
    height: 200rpx;
    // background: #5591AF;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 30rpx;

    image {
      width: 50rpx;
      height: 50rpx;
      margin-bottom: 20rpx;
    }
  }

  .login {
    padding: 0 30rpx;
    background: #FAFAFA;
    min-height: 80%;

    .house-location {
      background-color: #fff;
      padding: 30rpx 0 30rpx 30rpx;
      font-size: 28rpx
    }

    ::v-deep .u-form {
      background-color: #fff;

      .item__body__right__content__icon {
        color: #5591AF;
      }

    }

    ::v-deep .u-count-down__text {
      color: #5591AF;
    }


    ::v-deep .u-form-item__body {
      padding-left: 30rpx;
      padding-right: 30rpx;

      .u-count-down__text {
        color: #5591AF;
        font-size: 28rpx;
      }
    }
  }

  // .login {
  //   padding: 0 30rpx;

  //   ::v-deep .u-form {
  //     margin-top: 22rpx;

  //     .code-btn {
  //       color: #5591AF;
  //       font-size: 28rpx;
  //     }

  //     .u-form-item {
  //       .u-form-item__body {
  //         height: 103rpx;
  //         padding: 0;

  //         .u-count-down__text {
  //           color: #5591AF;
  //           font-size: 28rpx;
  //         }
  //       }

  //       .u-form-item__body__right__message {
  //         margin-left: 0 !important;
  //         // margin-top: -30rpx;
  //       }
  //     }
  //   }



  //   .tip {
  //     color: #C3C3C5;
  //     font-size: 26rpx;
  //     line-height: 40rpx;
  //     margin-top: 30rpx;
  //   }
  // }
</style>
